1 Créer un rapport HTML

La fonction html_document_bdxmetro() permet de convertir un fichier .Rmd au format .html. Elle admet un argument theme qui correspond au mode de design qui doit être utilisé pour l’output (light ou dark). Elle admet également des arguments toc, toc_depth et toc_float, similaires à ceux de la fonction rmarkdown::html_document(), pour contrôler l’aspect de la table des matières.

La fonction html_document_bdxmetro() est appelée dans l’argument output_format de la fonction rmarkdown::render().

Lors de son utilisation, la fonction affiche un message à l’utilisateur. Elle lui indique comment ajouter un logo dans l’entête du rapport :

## ********************************************************************************************************

## You want to integrate a logo in the header of your report?

## If yes, you must modify the title section of the .Rmd report header by copying/pasting the following content:

## title: |
##     ![](`r system.file("logo", "datalab-logo.png", package = "bdxmetroidentity")`){width=250px style="display: block; margin-bottom: 50px"}
##     Report title

## Do not forget to change 'Report title'

## ********************************************************************************************************

Exemple d’utilisation de la fonction html_document_bdxmetro() avec le thème light :

# Store in temp file for the example
rmddir <- tempfile(pattern = "rmd-")
dir.create(rmddir)

# Knit
rmarkdown::render(input = system.file("rmarkdown", "rmd_template_light.Rmd", package = "bdxmetroidentity"), 
                  output_format = html_document_bdxmetro(theme = "light"),
                  output_dir = rmddir)

# Open the knitted example
browseURL(file.path(rmddir, "rmd_template_light.html"))

Exemple d’utilisation de la fonction html_document_bdxmetro() avec le thème dark :

# Store in temp file for the example
rmddir <- tempfile(pattern = "rmd-")
dir.create(rmddir)

# Knit
rmarkdown::render(input = system.file("rmarkdown", "rmd_template_dark.Rmd", package = "bdxmetroidentity"), 
                  output_format = html_document_bdxmetro(theme = "dark"),
                  output_dir = rmddir)

# Open the knitted example
browseURL(file.path(rmddir, "rmd_template_dark.html"))

Le package propose également une fonction html_vignette_bdxmetro() qui fonctionne selon le même principe que rmarkdown::html_vignette(). Elle construit une vignette HTML, alternative plus légère aux documents HTML construits avec html_document_bdxmetro(), qui peut être incluse dans les packages. Son utilisation est similaire à html_document_bdxmetro() :

# Store in temp file for the example
rmddir <- tempfile(pattern = "rmd-")
dir.create(rmddir)

# Knit
rmarkdown::render(input = system.file("rmarkdown", "rmd_template_vignette_light.Rmd", package = "bdxmetroidentity"), 
                  output_format = html_vignette_bdxmetro(theme = "light"),
                  output_dir = rmddir)

# Open the knitted example
browseURL(file.path(rmddir, "rmd_template_vignette_light.html"))

2 Modifier le design des rapports

Le design des rapports est renseigné dans les fichiers css suivants :

• css/css_bdxmetro_light.css pour le thème light,
• css/css_bdxmetro_dark.css pour le thème dark.

Des variables sont définies au début des fichiers. Elles sont utilisées dans le corps des fichiers.

:root{
  --regular-font-family: "Roboto";
  --light-font-family: "Roboto Light";
  --thin-font-family: "Roboto Thin";
  --main-text-color: #292930;
  --main-text-color-rgba: 41, 41, 48;
  --secondary-text-color: #777777;
  --background-color-page: white;
  --brownish-grey: #777777;
  --charcoal-grey: #292930;
  --bright-blue: #0066ff;
  --cerulean: #039ed2;
  --seafoam-blue: #60ccb7;
  --bubblegum-pink: #fd79da;
  --warm-pink: #fd5072;
  --pastel-orange: #fd994e;
  --pastel-purple: #c4a5fd
}

Les balises utilisées pour modifier l’apparence des principaux éléments du rapport sont détaillées ci-dessous.

Pour les autres éléments, il est possible de connaître le sélecteur css en ouvrant le document HTML dans un navigateur. Puis clic droit > Inspecter puis Copy > Copy selector.